<template>
    <div class="pb_a">
        <van-nav-bar class="head_nb" title="报考指南" left-text="返回" left-arrow @click-left="$router.back()">
        </van-nav-bar>

        <!--报考科目-->
        <div class="pt_a ta_c">
            <div class="m_10 txt_cn">
                <div class="ft_14" v-html=title></div>
            </div>
        </div>

        <!--指南内容-->
        <div class="paper_question bg_w ft_14" v-for="first in firsts">
            <van-tag type="primary" size="large"> {{first.first}}</van-tag>
            <van-steps direction="vertical" :active="-1">
                <van-step v-for="(second,index) in seconds" v-if="second.serialNumber===first.serialNumber" :key="index">
                    <h3> {{second.title}}</h3>
                    <div class="content" v-html="second.content"></div>
                </van-step>
            </van-steps>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {List, Step, Steps, Tag} from 'vant';
    import {getGuideDO} from '../../../api';

    Vue.use(List).use(Step).use(Steps).use(Tag);

    export default {
        name: "Guide",
        data() {
            return {
                title: '',
                id: this.$route.query.id,
                firsts: [],
                seconds: []
            }
        },
        async created() {
            if (this.id != '') {
                var params = {'id': this.id};
                const result = await getGuideDO(params);
                if (result.code === 0) {
                    this.title = result.data.subjectName;
                    var data = JSON.parse(result.data.content);
                    for (var i = 0; i < data.length; i++) {
                        data[i].serialNumber = i;
                        this.firsts.push(data[i]);
                        var secondArr = data[i].second;
                        for (var j = 0; j < secondArr.length; j++) {
                            var item = secondArr[j];
                            item.serialNumber = i;
                            item.title = j + 1 + '.' + secondArr[j].title;
                            this.seconds.push(item);
                        }
                    }
                }
            }
        }
    }
</script>

<style>
    .van-step {
        color: #323233;
    }

    .van-tag--large {
        font-size: 20px;
    }

    .content img {
        width: 100%;
    }
</style>
